<template>
  <div id="app">
  
<!-- 我们可以 给有些页面加 keep-alive  有些页面不加 -->
		<keep-alive > 
			<router-view v-if="$route.meta.cache"  />
		</keep-alive>
		
		<router-view v-if="!$route.meta.cache"  />

	<van-tabbar v-model="active" route :active-color="mColor" v-if="isRoot">
	  <van-tabbar-item :to="item.path" v-for="item in Tabbar">
		      <span>{{item.name}}</span>
		      <template #icon="props"> 
				
			    <span class="iconfont" :class="item.icon"></span>
		      </template> 
	  </van-tabbar-item>


	</van-tabbar>
  </div>
</template>
<script>
	import { Tabbar, TabbarItem } from 'vant';

export default {
	name:'app',
	components:{ 
		[Tabbar.name]:Tabbar,
		[TabbarItem.name]:TabbarItem
	},
	computed:{
		 isRoot(){
			 let arr = ['/','/publish','/my']
			 return arr.includes(this.$route.path)
		 }
	},
	created(){
          //  初始化后 进行一些常用接口的请求 

		  this.$store.dispatch('cate/getCateData')
	},
	data(){
		return {
			active:0,
			Tabbar:[{
				path:'/',
				name:'首页',
				icon:'icon-shouye'
			},{
				path:'/publish',
				name:'发布',
				icon:'icon-fabu'
			},{
				path:'/my',
				name:'我的',
				icon:'icon-my'
			}]
			
		}
	}
	
	
}
	
</script>

<style lang="scss">
@import url('//at.alicdn.com/t/c/font_3711255_kwmurll1izj.css');
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*{
	margin: 0;
	padding: 0;
}

li{
	list-style: none;
}
.center{
	text-align: center;
}

</style>
